<template>
	<view class="shopDetail">
		<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="500" :style='"height:"+swHeight+"px;"'>
			<swiper-item v-for='(item,index) in datas.slide' :key='index'>
				<view class="swiper-item dFlex jCenter_aCenter" style="height: 100%;">
					<image :src="item.image_path" mode="widthFix" @load='getHeight' @tap='lookBig(index)'></image>
				</view>	
			</swiper-item>
		</swiper>
		<view class="price" >
			￥<text>{{datas.sell_price}}</text>
		</view>
		<!--  dFlex jBetween_aCenter -->
		<view class="title">
			<view class="shopName">{{datas.product_name}}</view>
			<view class="moren_spec">默认: {{sel_spec.specs_name}}</view>
			<!-- <view class="shareIcon imgPublic">
				<image src="https://wx.gdxixiashi.com/public/images/kind/fenxiang@2x.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="zizhi dFlex jBetween_aCenter">
			<view class="zizhiOne dFlex jCenter_aCenter">
				<view class="zizhiIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/car/zhengque@2x.png" mode="widthFix"></image>
				</view>
				<text>{{datas.word1}}</text>
			</view>
			<view class="zizhiOne dFlex jCenter_aCenter">
				<view class="zizhiIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/car/zhengque@2x.png" mode="widthFix"></image>
				</view>
				<text>{{datas.word2}}</text>
			</view>
			<view class="zizhiOne dFlex jCenter_aCenter">
				<view class="zizhiIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/car/zhengque@2x.png" mode="widthFix"></image>
				</view>
				<text>{{datas.word3}}</text>
			</view>
		</view>
		<!-- <view class="line dFlex jBetween_aCenter">
			<view class="lineTit">洗护方式：</view>
			<view class="lineVal dFlex jBetween_aCenter">
				<view class="showVal">免拆洗</view>
				<view class="rightIcon imgPublic">
					<image src="../static/images/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
		</view> -->
		<!-- <view class="line dFlex jBetween_aCenter">
			<view class="lineTit">窗帘规格：</view>
			<view class="lineVal dFlex jBetween_aCenter">
				<view class="showVal" @tap.stop='specFlag = true'>
					<input type="text" disabled v-model='sel_spec.specs_name' placeholder='请选择规格'>
					<picker mode="selector" :range="datas.specs" range-key='specs_name' @change="selSpec">
						<input type="text" disabled v-model='sel_spec.specs_name' placeholder='请选择规格'>
					</picker>
				</view>
				<view class="rightIcon imgPublic">
					<image src="../static/images/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
		</view> -->
		<view class="desc" v-if='datas.qidai!="1"'>
			<view class="menus dFlex jAround_aCenter">
				<view :class="['menuOne',config == '1'?'active':'']" @click='config = "1"'>
					<text>服务详情</text>
					<view class="line"></view>
				</view>
				<view :class="['menuOne',config == '2'?'active':'']" @click='config = "2"'>
					<text>服务评价</text>
					<view class="line"></view>
				</view>
			</view>
			<view class="config">
				<view class="content" v-if='config == "1"' v-html="datas.intro"></view>
				<view class="comment" v-if='config == "2"'>
					<view class="commentOne" v-for="(item,index) in comment" :key='index'>
						<view class="info dFlex jBetween_aCenter">
							<view class="userInfo dFlex jStart_aCenter">
								<view class="userTx imgPublic">
									<image :src="item.image_head"></image>
								</view>
								<view class="other dFlex jBetween_aCenter">
									<text>{{item.nickName}}</text>
									<view class="rateBox">
										{{item.grade}}
										<!-- <u-rate :count="5" inactive-color='#e8e8e8' v-model='item.zh_score' disabled active-color='#FFB800' size='30'></u-rate> -->
									</view>
								</view>
							</view>
							<!-- <view class="createTime">{{exchangeTime(item.createtime)}}</view> -->
						</view>
						<view class="content">
							<view class="desc">{{item.content}}</view>
							<view class="imgs dFlex fWap jStart_aStart" v-if="item.images.length">
								<view v-for="(item2,index2) in item.images" class='smallImg'>
									<view class="imgOne imgPublic" @tap='lookBig2(item2,index)' :key='index2' v-if="index2<3">
										<image :src="item2" mode="widthFix"></image>
										<view class="smallZz" v-if='index2 == 2 && item.images.length>3'>+{{item.images.length-3}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="tit"></view> -->
		</view>
		<view class="seat"></view>
		<view :class="['btns','dFlex','jBetween_aCenter',device=='ios'?'ios':'']" v-if='datas.qidai!="1"'>
			<view class="btnLeft dFlex jStart_aCenter">
				<!-- #ifdef MP-WEIXIN -->
				<button open-type='contact' class="btnTool">
					<view class="btnIcon imgPublic">
						<image src="https://wx.gdxixiashi.com/public/images/kind/kefu@2x.png" mode="widthFix"></image>
					</view>
					<text>客服</text>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="btnTool" @tap='goService'>
					<view class="btnIcon imgPublic">
						<image src="https://wx.gdxixiashi.com/public/images/kind/kefu@2x.png" mode="widthFix"></image>
					</view>
					<text>客服</text>
				</view>
				<!-- #endif -->
				<view class="btnTool" @tap='goCar'>
					<view class="btnIcon imgPublic">
						<image src="https://wx.gdxixiashi.com/public/images/kind/gouwuche@2x.png" mode="widthFix"></image>
					</view>
					<text>购物车</text>
				</view>
			</view>
			<view class="btnRight dFlex jEnd_aCenter">
				<!-- <view class="addCar" @tap.stop='addCar'>加入购物车</view>
				<view class="buy" @tap.stop='buyNow'>立即购买</view> --> 
				<view class="addCar" @tap.stop='btnOption(1)' v-if="datas.is_group!='2'">加入购物车</view>
				<view class="buy" @tap.stop='btnOption(2)' :style='{
					"border-top-left-radius":datas.is_group == "2"?"40px":"0px",
					"border-bottom-left-radius":datas.is_group == "2"?"40px":"0px",
				}'>{{datas.is_group == '2' ? '发起拼单' : '立即购买'}}</view>
			</view>
		</view>
		<!-- 规格弹窗 -->
		<view class="zz dFlex flexDirection jEnd_aCenter" v-if="specFlag">
			<view class="spec">
				<view class="titles dFlex jBetween_aCenter">
					<view class="closeIcon imgPublic"></view>
					<view class="tit">商品规格</view>
					<view class="closeIcon imgPublic" @tap.stop='specFlag = false'>
						<!-- <image src="../static/images/closeIcon.png" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="shopInfo dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src="datas.list_img" mode="widthFix"></image>
					</view>
					<view class="other">
						<view class="shopName">{{datas.product_name}}</view>
						<view class="price dFlex jStart_aCenter" v-if="sel_spec.specsId">
							<text>￥{{sel_spec.sell_price}}</text>
							<text style="font-size: 12px;display: inline-block;margin-left: 12px;">奖励{{sel_spec.point}}积分</text>
						</view>
						<view class="selSpec">{{sel_spec.specsId?sel_spec.specs_name:'请选择规格'}}</view>
					</view>
				</view>
				<view class="specList">
					<view class="part">
						<view class="partList dFlex jStart_aStart fWap">
							<view :class="['specOne',sel_spec.specsId == item.specsId?'active':'']" v-for="(item,index) in datas.specs" @tap.stop='selSpec2(index)' :key='index'>{{item.specs_name}}</view>
						</view>
					</view>
				</view>
				<view class="sureBtn" @tap.stop='nextOption'>确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgDomain:getApp().globalData.imgDomain,
				device: getApp().globalData.platform,
				swHeight:'',
				productId:"",
				datas:{},
				config:'1',
				sel_spec:'',
				// 规格弹窗
				specFlag:false,
				btn_option:'',//1 加入购物车  2 立即购买
				// 评价
				comment:[],
				page:1,
				load:false,
				serviceTel:"",
			};
		},
		onLoad(e) {
			this.productId = e.productId;
			this.initData();
			this.initComment();
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onReachBottom(){
			if(this.load){
				this.load = false;
				this.page ++ ;
				this.initComment();
			}
		},
		methods:{
			// 商品信息
			initData(){
				this.tool.getData('Product/goodsInfo',{
					productId:this.productId,
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):0
				}).then(res=>{
					if(res){
						const reg = new RegExp('<img', 'gi');
						res.intro = res.intro.replace(reg, `<img style="width: 100%!important;"`);
						this.datas = res;
						this.sel_spec = res.specs.find((item)=>{return item.specs_name == res.specs_name});
						this.serviceTel = res.serviceTel;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initComment(){
				this.tool.getData('Product/commentList',{
					productId:this.productId,
					page:this.page,
				}).then(res=>{
					if(res){
						this.comment = this.page == '1' ? res.list : this.comment.concat(res.list);
						this.load = res.length >= 10 ? true : false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			lookBig2(currentIdx,idx){
				let comment = this.comment[idx];
				uni.previewImage({
					current:currentIdx,
					urls:comment.images
				})
			},
			// 查看大图
			lookBig(idx){
				let current = this.datas.slide[idx].image_path;
				let arr = [];
				this.datas.slide.map((item,index)=>{
					arr.push(item.image_path);
				})
				uni.previewImage({
					current:current,
					urls:arr
				})
			},
			// 在线客服
			goService(){
				uni.makePhoneCall({
					phoneNumber:this.serviceTel,
				})
			},
			// 去购物车
			goCar(){
				uni.switchTab({
					url:'/pages/car'
				})
			},
			btnOption(status){
				this.btn_option = status;
				if(uni.getStorageSync('userId')){
					this.specFlag = true;
				}else{
					uni.showToast({
						title:'请登录后操作',
						icon:"none"
					})
					setTimeout(()=>{
						// #ifdef MP-WEIXIN
						uni.redirectTo({
							url:'/person/login'
						})
						// #endif
						// #ifdef APP-PLUS
						uni.redirectTo({
							url:'/person/mobileLogin'
						})
						// #endif
					},1650)
				}
			},
			// 下一步
			nextOption(){
				if(!this.sel_spec.specsId){
					uni.showToast({
						title:"请选择规格",
						icon:"none"
					})
					return
				}
				if(this.btn_option == '1'){
					this.tool.getData('Product/addCart',{
						memberId:uni.getStorageSync('userId'),
						specsId:this.sel_spec.specsId,
						num:1,
					}).then(res=>{
						// console.log(res);
						if(res){
							uni.showToast({
								title:'购物车添加成功',
								icon:"success"
							})
						}
					}).catch(err=>{
						console.log(err);
					})
				}else{
					uni.navigateTo({
						url:'./beforeOrder?status=1&specsId='+this.sel_spec.specsId+'&num=1&isGroup='+this.datas.is_group+'&isLaunch=true',
					})
				}
				this.specFlag = false;
			},
			// 立即购买
			buyNow(){
				if(uni.getStorageSync('userId')){
					if(!this.sel_spec.specsId){
						this.specFlag = true;
						return
					}
					uni.navigateTo({
						url:'./beforeOrder?status=1&specsId='+this.sel_spec.specsId+'&num=1&isGroup='+this.datas.is_group,
					})
				}else{
					uni.showToast({
						title:'请登录后操作',
						icon:"none"
					})
					setTimeout(()=>{
						// #ifdef MP-WEIXIN
						uni.redirectTo({
							url:'/person/login'
						})
						// #endif
						// #ifdef APP-PLUS
						uni.redirectTo({
							url:'/person/mobileLogin'
						})
						// #endif
					},1650)
				}
			},
			// 加入购物车
			addCar(){
				if(uni.getStorageSync('userId')){
					if(!this.sel_spec.specsId){
						this.specFlag = true;
						return
					}
					this.tool.getData('Product/addCart',{
						memberId:uni.getStorageSync('userId'),
						specsId:this.sel_spec.specsId,
						num:1,
					}).then(res=>{
						// console.log(res);
						if(res){
							uni.showToast({
								title:'购物车添加成功',
								icon:"success"
							})
						}
					}).catch(err=>{
						console.log(err);
					})
				}else{
					uni.showToast({
						title:'请登录后操作',
						icon:"none"
					})
					setTimeout(()=>{
						// #ifdef MP-WEIXIN
						uni.redirectTo({
							url:'/person/login'
						})
						// #endif
						// #ifdef APP-PLUS
						uni.redirectTo({
							url:'/person/mobileLogin'
						})
						// #endif
					},1650)
				}
			},
			// 轮播图高度
			getHeight(e){
				this.swHeight = uni.getSystemInfoSync().windowWidth / (e.detail.width / e.detail.height);
			},
			// 选择商品规格
			selSpec(e){
				this.sel_spec = this.datas.specs[e.detail.value];
			},
			// 选择商品规格
			selSpec2(idx){
				this.sel_spec = this.datas.specs[idx];
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.shopDetail{
		width: 100%;
		.zz{
			.spec{
				width:100%;
				overflow: auto;
				max-height: 80%;
				padding: 0 24rpx 12px;
				box-sizing: border-box;
				background: white;
				.sureBtn {
					width: 100%;
					padding: 12px 0;
					border-radius: 40px;
					color: white;
					text-align: center;
					background: #1664FF;
				}
				.specList {
					margin-bottom: 24px;
					.part {
						width: 100%;
						.partList {
							width: 100%;
							.specOne {
								width: auto;
								text-align: center;
								padding: 6px 12px;
								box-sizing: border-box;
								background: #F6F6F6;
								border-radius: 8px;
								margin-right: 12px;
								margin-bottom: 10px;
								font-weight: 400;
								border: 1px solid #F6F6F6;
							}
							.active {
								background: #1664FF;
								color: #FFFFFF;
								border: 1px solid #1664FF;
							}
						}
					}
				}
				.shopInfo {
					width: 100%;
					margin-bottom: 12px;
					.shopImg {
						width: 66px;
						height: 66px;
						overflow: hidden;
						background: white;
						margin-right: 12px;
						border-radius: 8px;
					}
					.other {
						flex: 1;
						.price {
							font-size: 16px;
							color: #FC4424;
							margin: 6px 0;
							background: none;
							padding: 0;
						}
						/* .specPrice{
							font-size: 16px;
						} */
						.selSpec {
							font-size: 12px;
							color: #999999;
							margin: 6px 0 6px;
						}
						.shopName {
							font-size: 18px;
							width: 90%;
						}
					}
				}
				.titles{
					width:100%;
					padding: 15px 3.2%;
					box-sizing: border-box;
					color: #000000;
					font-size: 15px;
					.closeIcon{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
		.btns {
			width: 100%;
			padding:10px 3%;
			box-sizing: border-box;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 10;
			.btnRight {
				flex: 1;
				color: white;
				font-size: 12px;
				border-radius: 40px;
				border: 1px solid #1664FF;
				margin-left: 12px;
				text-align: center;
				.addCar {
					flex: 1;
					padding: 10px 22px;
					border-top-left-radius: 40px;
					border-bottom-left-radius: 40px;
					color: #1664FF;
					box-sizing: border-box;
				}
				.buy {
					flex: 1;
					padding: 10px 22px;
					border-top-right-radius: 40px;
					border-bottom-right-radius: 40px;
					background: #1664FF;
					box-sizing: border-box;
					color: white;
				}
			}
			.btnLeft {
				width: auto;
				.btnTool {
					font-size: 12px;
					margin: 0 6px;
					.btnIcon {
						width: 20px;
						height: 20px;
						margin: 0 auto 2px;
					}
				}
			}
		}
		.desc{
			width: 100%;
			padding-top: 12px;
			.comment{
				width: 100%;
				padding:0 12px;
				box-sizing: border-box;
				.commentOne{
					width: 100%;
					margin-bottom: 12px;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
					.content{
						.imgs{
							width: 100%;
							.smallImg{
								margin-right: 5px;
								margin-bottom: 10px;
								position: relative;
							}
							.imgOne{
								width: 100px;
								height: 100px;
								overflow: hidden;
								border-radius: 4px;
								position: relative;
								image{
									width: 100%;
								}
								.smallZz{
									width: 100%;
									height: 100%;
									background: rgba(0, 0, 0, 0.5);
									text-align: center;
									line-height: 100px;
									border-radius: 4px;
									font-size: 20px;
									color:white;
									position: absolute;
									top: 0;
									left: 0;
								}
							}
							.smallImg:nth-child(3n+3){
								margin-right: 0;
							}
						}
						.desc{
							width: 100%;
							margin-bottom: 12px;
							padding: 0;
						}
					}
					.info{
						width: 100%;
						margin-bottom: 10px;
						.userInfo{
							flex:1;
							font-weight: bold;
							.other{
								flex:1;
								.rateBox{
									font-size:12px;
									color:#1362C9;
								}
							}
							.userTx{
								width: 36px;
								height: 36px;
								overflow: hidden;
								border-radius: 50%;
								margin-right: 8px;
								image{
									width: 36px;
									height: 36px;
								}
							}
						}
						.createTime{
							width:auto;
							color: #999999;
							font-size: 12px;
						}
					}
				}
				.commentOne:last-child{
					margin: 0;
					border: none;
				}
			}
			.menus{
				width: 100%;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;
				margin-bottom:6px;
				.menuOne{	
					display: inline-block;
					width:20%;
					text-align: center;
					font-weight: bold;
					color:#999999;
					.line{
						width: 21px;
						height: 2px;
						border-radius: 50px;
						margin: 7px auto 0;
						background: none;
						padding:0;
					}
				}
				.active{
					color: #323232;
					.line{
						background: #1664FF;
					}
				}
			}
			// .tit{
			// 	width: 94%;
			// 	padding: 0 3%;
			// 	margin: 0 auto 10px;
			// 	border-left: 3px solid #1664FF;
			// 	box-sizing: border-box;
			// }
		}
		.line{
			width: 100%;
			padding: 12px 3%;
			box-sizing: border-box;
			color: #999999;
			border-bottom: 1px solid #E8E8E8;
			.lineTit{
				width: 25%;
			}
			.lineVal{
				flex: 1;
				color: #333333;
				.showVal{
					flex: 1;
					picker{
						width: 100%;
					}
				}
				.rightIcon{
					width: 15px;
				}
			}
		}
		.zizhi{
			width: 100%;
			padding: 12px 3%;
			box-sizing: border-box;
			font-size: 12px;
			color: #999999;
			border-bottom: 1px solid #E8E8E8;
			.zizhiOne{
				flex: 1;
				.zizhiIcon{
					width: 15px;
					margin-right: 6px;
				}
			}
		}
		.title{
			width: 100%;
			padding: 12px 3%;
			border-bottom: 1px solid #E8E8E8;
			font-size: 16px;
			box-sizing: border-box;
			.shopName{
				flex: 1;
				margin-bottom: 12px;
			}
			.moren_spec{
				font-size:12px;
				color:#999999;
			}
			.shareIcon{
				width: 15px;
			}
		}
		.price{
			width: 100%;
			padding: 12px 3%;
			color: white;
			box-sizing: border-box;
			background: linear-gradient(#1664ff 0%, #609ff8 100%);
			text{
				font-size: 18px;
				font-weight: bold;
			}
		}
	}
</style>
